<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="总结 学会使用基本的git命令 管理源代码 学会去github创建仓库 并将代码上传到github的仓库 (有待完成 回家有网再push) 了解本地的.git和服务器github的.git的关系 是两个仓库 一个是本地 一个是服务器 需要使用一句命令来关联 git remote add origin 远端的.git的地址 了解github的概念以及github和git的关系 学会把本地代码提交到g">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/2018/11/01/电商全端第一天/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="总结 学会使用基本的git命令 管理源代码 学会去github创建仓库 并将代码上传到github的仓库 (有待完成 回家有网再push) 了解本地的.git和服务器github的.git的关系 是两个仓库 一个是本地 一个是服务器 需要使用一句命令来关联 git remote add origin 远端的.git的地址 了解github的概念以及github和git的关系 学会把本地代码提交到g">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2018-09-26T13:57:11.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
<meta name="twitter:description" content="总结 学会使用基本的git命令 管理源代码 学会去github创建仓库 并将代码上传到github的仓库 (有待完成 回家有网再push) 了解本地的.git和服务器github的.git的关系 是两个仓库 一个是本地 一个是服务器 需要使用一句命令来关联 git remote add origin 远端的.git的地址 了解github的概念以及github和git的关系 学会把本地代码提交到g">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-电商全端第一天" class="article article-type-post" itemscope="" itemprop="blogPost">
  <div class="article-meta">
    <a href="/2018/11/01/电商全端第一天/" class="article-date">
  <time datetime="2018-11-01T09:22:23.982Z" itemprop="datePublished">2018-11-01</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
<li>学会使用基本的git命令 管理源代码</li>
<li>学会去github创建仓库 并将代码上传到github的仓库 (有待完成 回家有网再push)</li>
<li>了解本地的.git和服务器github的.git的关系 是两个仓库 一个是本地 一个是服务器 需要使用一句命令来关联 git remote add origin 远端的.git的地址</li>
<li>了解github的概念以及github和git的关系</li>
<li>学会把本地代码提交到github仓库</li>
<li>了解ssh无密码提交方式</li>
</ul>
<h2 id="rem结合移动端结合设计稿的开发方式"><a href="#rem结合移动端结合设计稿的开发方式" class="headerlink" title="rem结合移动端结合设计稿的开发方式"></a>rem结合移动端结合设计稿的开发方式</h2><ol>
<li>什么是设计稿： 设计师针对手机屏幕设计的一个网页图片  一般公司会有一个标准<br> 目前常见的标准  <pre><code>750  iphone678设计稿 
720  三星s5设计稿
640  iphone5设计稿
设计稿为什么要这么大因为手机屏幕分辨率像素是真实2倍 设计稿的图片要按照分辨率来设计因为网页在分辨率放大图片不够大就会失真
1125 iphonex 3倍设计稿 （相对比较少）
至于公司到底什么设计稿由设计师决定
</code></pre></li>
<li><p>如何使用设计稿来切图<br> 比如750 2倍设计稿 由于开发的时候按照375屏幕调试<br> 量了轮播图宽度750  页面写CSS写375px<br> 量了导航每个是150  页面写CSS写75px<br> 量了文字大小 36px  页面写CSS写18px<br> 量了的所有内容 都要写CSS都是缩小一半</p>
</li>
<li><p>如何转rem 用当写的页面真实大小来转rem<br> 设计稿是750  按照缩小一半的375来写    转rem的时候标准屏幕就是375<br> 设计稿是640  按照缩小一半的20来写    转rem的时候标准屏幕就是320</p>
</li>
<li><p>注意如果标的dp不是px 写的时候标了多少就是多少<br> dp屏幕设备像素比例  1dp = 1屏幕比例 1倍 1dp = 1px  2倍 1dp  = 2px<br> dp和真实px一致</p>
</li>
</ol>
<h2 id="less转css"><a href="#less转css" class="headerlink" title="less转css"></a>less转css</h2><ol>
<li>使用浏览器less.js 适合开发调试 不适合上线</li>
<li>使用编译器 提前把less编译成CSS 页面直接使用CSS即可</li>
<li>编译器的使用方式<ol>
<li>下载一个node 安装  装在C盘默认目录不要更改 打开后一路下一步  一路Next等待安装完成</li>
<li>在nodejs里面全局安装less编译器环境  安装一次即可<br> 打开黑窗  开始 》 运行 输入cmd打开黑窗<br> 输入 npm i less -g   回车</li>
<li>在你的less文件所在的目录打开黑窗   编译代码每次要编译文件都要执行<br> 在空白处 按住shift+鼠标右键<br> 输入lessc index.less index.css<br> 使用lessc命令把index.less转成index.css</li>
<li>能装就装 不能装后面还有方案 以后不会像这样编译 以后会自动化工具一次性搞定 gulp webpack等高级自动化工具完成整个项目编译</li>
</ol>
</li>
</ol>
<h2 id="git-和-github"><a href="#git-和-github" class="headerlink" title="git 和 github"></a>git 和 github</h2><ol>
<li>什么是git: 是一个版本控制系统（版本控制工具） 用来管理我们项目源代码的版本的</li>
<li><p>为什么要使用版本管理系统：</p>
<ol>
<li>因为软件经常要更新 每更新一次就要出一个新的版本</li>
<li>新版和老版本代码是不一样的 需要管理每个版本的源代码</li>
<li>每个版本的代码都需要保留和备份 如果使用文件夹的方式保存代码版本很不方便 </li>
<li>现在都是使用工具来管理代码</li>
</ol>
</li>
<li><p>有哪些源代码管理(系统)工具：<br> svn 是一个开放源代码的版本控制系统 操作简单 但是需要联网开发 不适合开源项目<br> git 是一个开源的代码版本控制系统 操作复杂 离线开发 适合开源项目<br> vss 最早的 微软出来的管理工具 针对windows电脑不开源 使用文件共享方式来管理 安全性低</p>
</li>
<li><p>版本管理原理</p>
<ol>
<li>svn 集中式： 集中在一台电脑管理代码版本 别人只要把代码提交给管理源代码的电脑上</li>
<li>git 分布式的： 分布在每个人电脑上管理每个人的版本 我可以把我的代码提交都服务器 你可以吧代码提交到服务器  服务器只是做了代码共享 （各自在本地管理各自的代码的版本）</li>
</ol>
</li>
<li><p>git和github的关系<br>git是一个工具用来管理本地代码版本的<br>github是一个服务器是用来共享代码的服务器</p>
</li>
</ol>
<h2 id="git基本使用"><a href="#git基本使用" class="headerlink" title="git基本使用"></a>git基本使用</h2><h3 id="1-安装环境-安装git工具软件"><a href="#1-安装环境-安装git工具软件" class="headerlink" title="1. 安装环境  安装git工具软件"></a>1. 安装环境  安装git工具软件</h3><pre><code>找到git软件 day06 移动web》的预习资料里面的》1-教学资料》Git-2.13.0-64-bit.exe 
双击打开一路下一步安装
如果安装完成后 在桌面上右键 有git bash here就表示安装成功
</code></pre><h3 id="2-了解git的使用流程-怎么管理源代码"><a href="#2-了解git的使用流程-怎么管理源代码" class="headerlink" title="2. 了解git的使用流程 怎么管理源代码"></a>2. 了解git的使用流程 怎么管理源代码</h3><pre><code>理解git工作流程
工作区  源代码
暂存区  临时管理源代码
本地仓库  本地源代码管理版本库
远程仓库  服务器源代码版本库
</code></pre><h3 id="3-常用的git命令-所有的命令都是在当前项目的git黑窗里面执行-git-bash-here"><a href="#3-常用的git命令-所有的命令都是在当前项目的git黑窗里面执行-git-bash-here" class="headerlink" title="3. 常用的git命令 所有的命令都是在当前项目的git黑窗里面执行 git bash here"></a>3. 常用的git命令 所有的命令都是在当前项目的git黑窗里面执行 git bash here</h3><pre><code>1. git init 初始一个本地仓库
    执行后会在当前项目的根目录创建一个.git文件夹 文件夹就是本地仓库 
    这个文件夹是隐藏文件夹需要显示隐藏文件夹
2. git add index.html  添加一个文件到本地暂存区
   git add .   添加所有的文件到暂存区 
3. git commit -m &apos;提交日志&apos;  把暂存区的文件提交到本地仓库   提交日志就是说明你改了了什么
4. 第一次提交的时候需要指定一下你当前提交的用户和邮箱
5. git config --global user.email &quot;228197155@qq.com&quot;  改成你的邮箱
6. git config --global user.name &quot;zwxs&quot;               改成你的github用户名
7. 指定完成后再次执行git commit -m &apos;提交日志就可以提交了&apos;
8. git log 查看代码提交的记录  
      查看当前历史提交的记录 版本号 作者 时间  提交说明
9. 如果新增了代码需要再次提交  重复 2步  和 第3步
10. 如果在新建一个项目重新管理 执行 1 2 3 步骤 既可以
</code></pre><h3 id="4-使用git和github交互"><a href="#4-使用git和github交互" class="headerlink" title="4. 使用git和github交互"></a>4. 使用git和github交互</h3><pre><code>1. 去github上去创建一个服务器的仓库
    1. 打开github官网 登录 
    2. 点击右上角头像左边的+号
    3. 点击New repository  新建一个本地仓库
    4. 输入Repository name仓库名  不能有中文空格等特殊符号  尽量用纯英文
    5. 输入一个仓库的描述
    6. 选择public
    7. 是否要初始化一个README阅读我 不要勾
    8. 点击创建
2. 让本地仓库和远程仓库连接起来 (做一次即可)
    git remote add origin  git@github.com:zwxs/jd23.git  让本地仓库和远程仓库连接 
      git@github.com:zwxs/jd23.git 远程仓库地址 github给你提供的
3. 把本地仓库的代码提交到远程的仓库里面
    git push -u origin master  把本地代码提交到远程的master(主)分支里面
</code></pre><h3 id="5-把本地电脑和github服务器账号相关联"><a href="#5-把本地电脑和github服务器账号相关联" class="headerlink" title="5. 把本地电脑和github服务器账号相关联"></a>5. 把本地电脑和github服务器账号相关联</h3><pre><code>1. 使用https 是需要输入用户名和密码的方式  每次都要输入 输错就把提交命令再执行一次 会重新让你输入
2. 使用SSH  可以让本地电脑和github账号相关联 关联了之后就是永久
    1. 理解原理： 使用一个本地秘钥(电脑的身份证) 把你的本地秘钥和服务器github账号相互绑定  把身份证绑定到服务器账号上
    你每次提交都会读取你当前的本地的秘钥 
    再和你本地仓库管理的github服务器仓库的账号里面的秘钥对应
    如果是一样的就认为github是认可这台电脑的就允许提交
    2. 在本地电脑生成一个秘钥：
      在gitbash黑窗里面执行 ssh-keygen -t rsa -C &quot;228197155@qq.com&quot;
      输入后一路回车 出现2048就表示成功
    3. 秘钥生成后会在C盘 》 用户 》 你的用户(英文或者administor) 》 .ssh 》 id_rsa.pub 
        id_rsa.pub  本地公钥(公开的钥匙) 
        把这个id_rsa.pub 使用记事本打开 把乱码复制一下
    4. 打开github账号
        点击设置
        点击SSH设置
        点击右上角new SSHKey
        输入title(你的名字) key (复制公钥里面的乱码)
        点击Add即可
        出现一个黑色的钥匙就表示成功
</code></pre><h2 id="把一个项目从头到尾提交到github的步骤"><a href="#把一个项目从头到尾提交到github的步骤" class="headerlink" title="把一个项目从头到尾提交到github的步骤"></a>把一个项目从头到尾提交到github的步骤</h2><ol>
<li>创建一个项目 写代码</li>
<li>git init 初始化本地仓库 </li>
<li>git add . 添加到暂存区</li>
<li>git commit -m ‘第一次提交jd项目’</li>
<li>去github服务器创建一个远程仓库  选择SSH方式提交</li>
<li>把本地仓库和远程仓库进行关联<br>git remote add origin <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:zwxs/jd24.git</li>
<li>把本地代码提交到远程服务器<br>git push -u origin master<br>如果第一提示输入一个yes/no 输入yes即可<br>提交完成刷新github就可以看到</li>
</ol>
<h2 id="git的一些其他命令"><a href="#git的一些其他命令" class="headerlink" title="git的一些其他命令"></a>git的一些其他命令</h2><ol>
<li>git版本回退<br> git reset  –hard HEAD^   回到上一个版本<br> git reset –hard 0bc1129  回到指定的版本</li>
<li>查看所有版本号<br> git reflog  查看所有的版本号</li>
<li>git status 查看当前版本库的状态<br> 查看当前有哪些文件没有添加到暂存区<br> 查看当前有哪些文件没有提交到本地仓库</li>
<li>git diff 查看当前代码和本地代码的区别<br>  同一个文件之前本地仓库是什么样子的<br>  你最新写了什么代码</li>
<li>git remote 改变远程地址<ol>
<li>如果设置了一个远程仓库地址 但是不是你想要的</li>
<li>先删除之前的远程仓库地址 git remote rm origin</li>
<li>再添加一个新的远程仓库地址  git remote add origin <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:zwxs/jd24.git</li>
</ol>
</li>
</ol>
<h2 id="使用git搭建播客"><a href="#使用git搭建播客" class="headerlink" title="使用git搭建播客"></a>使用git搭建播客</h2><ol>
<li><p>电脑使用npm 全局安装这个博客工具<br>npm install -g hexo-cli</p>
</li>
<li><p>使用hexo初始化一个博客<br>hexo i blog</p>
</li>
<li><p>进入创建的bolg项目文件 写博客写文章<br> 进入blog\source_posts<br> 把你的md文件放到这个文件夹里面</p>
</li>
<li>编译博客 进入blog根目录打开黑窗<br> 输入 hexo g  把你写的博客编译静态页面</li>
<li>需要访问博客 进入blog根目录打开黑窗<br> 输入 hexo s   开启一个网页服务器帮你打开静态博客页面</li>
</ol>
<h2 id="如何把博客放到github上"><a href="#如何把博客放到github上" class="headerlink" title="如何把博客放到github上"></a>如何把博客放到github上</h2><ol>
<li>打开github去创建一个仓库 仓库名   用户名.github.io   zwxs.github.io<br> 博客的网址    <a href="https://zwxs.github.io" target="_blank" rel="noopener">https://zwxs.github.io</a><br> 如果没有index.html 跟上文件名称.扩展名 <a href="https://zwxs.github.io/a.html" target="_blank" rel="noopener">https://zwxs.github.io/a.html</a>  </li>
<li>把博客生成的静态页面项目传到博客的仓库里面<br> 把public文件夹里面的静态页面传到仓库即可</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2018/11/01/电商全端第一天/" data-id="cjnye084a00014wv3w34hxsbi" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/2018/11/01/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Hello World</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">November 2018</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/11/01/电商全端第一天/">(no title)</a>
          </li>
        
          <li>
            <a href="/2018/11/01/hello-world/">Hello World</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>